<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Custom Dialog</title>
  <script src="./node_modules/blockly/blockly_compressed.js"></script>
  <script src="./node_modules/blockly/blocks_compressed.js"></script>
  <script src="./node_modules/blockly/msg/en.js"></script>
    <style>
    body {
      background-color: #fff;
      font-family: sans-serif;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
    }
  </style>
</head>
<body>
  <p>This is a simple demo of replacing modal browser dialogs with HTML.
  </p>

  <p>Try creating new variables, creating variables with names already in
     use, or deleting multiple blocks on the workspace.
  </p>

  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
    <category name="Inputs" colour="%{BKY_MATH_HUE}">
      <block type="math_number" gap="32">
        <field name="NUM">123</field>
      </block>
      <block type="text"></block>
      <block type="text_prompt_ext">
        <value name="TEXT">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
    </category>
    <sep></sep>
    <category name="Variables" colour="%{BKY_VARIABLES_HUE}" custom="VARIABLE"></category>
    <category name="Functions" colour="%{BKY_PROCEDURES_HUE}" custom="PROCEDURE"></category>
  </xml>

  <script>
    var demoWorkspace = Blockly.inject('blocklyDiv',
        {media: 'https://unpkg.com/blockly/media/',
         toolbox: document.getElementById('toolbox')});
  </script>
  <script src="custom-dialog.js"></script>

</body>
</html>
